<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 筛选组件 -->
        <questions-filter @setList="setList" @submitFilter="submitFilter">
          <template #excelExport-btn>
            <el-button
            type="primary"
            size="small"
            @click="handleExcelExport"
            >
            {{$t('table.Excel-Export')}}
            </el-button>
          </template>
        </questions-filter>
         <!-- 提示 -->
        <el-alert
          :closable="false"
          type="info"
        >
        <template>
          <i class="el-icon-info" style="font-size:16px;margin-right:10px;vertical-align: middle"></i>
          <span style="vertical-align: middle">数据一共有{{total}}条</span>
        </template>
        </el-alert>
        <!-- 表格 -->
        <el-table
          v-loading="isTableLoading"
          :data="tableData"
          style="width: 100%; margin-top: 20px;"
          :highlight-current-row="true"
          :header-cell-style="tableHeaderBottomColorFn"
        >
          <el-table-column prop="number" :label="$t('table.'+'Testquestionnumber')" width="120">
          </el-table-column>
          <el-table-column prop="subject" :label="$t('route.'+'subjects-list')" width="80">
          </el-table-column>
          <el-table-column prop="catalog" :label="$t('route.'+'subjects-directorys')"> </el-table-column>
          <el-table-column prop="questionType" :label="$t('table.'+'QuestionType')">
            <template #default="{row}">
              {{formatQuestionType(row?.questionType)}}
            </template>
            </el-table-column>
          <el-table-column prop="question" :label="$t('table.'+'stem')">
            <template v-slot="{row}">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column width="180" prop="addDate" :label="$t('table.'+'EntryTime')">
            <template #default="{row}">
              {{formatDddDate(row.addDate)}}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" :label="$t('table.'+'difficulty')">
            <template #default="{row}">
              {{formatDifficulty(row.questionType)}}
            </template>
          </el-table-column>
          <el-table-column prop="creator" :label="$t('table.'+'EnteredBy')"> </el-table-column>
          <el-table-column prop="address"  :label="$t('table.'+'operation')"  width="200">
            <template #default="{row}">
              <!-- 预览 -->
                <el-button
                :title="$t('table.'+'preview')"
                @click="previewQuestion(row.id)"
                size="small"
                type="primary"
                plain
                icon="el-icon-view"
                circle
                class="handleButtonHover"
                ></el-button>

              <!-- 修改 -->
                <el-button
                :title="$t('table.'+'edit')"
              @click="editQuestion(row.id)"
                size="small"
                type="success"
                plain
                icon="el-icon-edit"
                circle
                class="handleButtonHover"
              ></el-button>

              <!-- 删除 -->
                <el-button
                :title="$t('table.'+'remove')"
              @click="delQuestion(row.id)"
                size="small"
                type="danger"
                plain
                icon="el-icon-delete"
                circle
                class="handleButtonHover"
              ></el-button>

              <!-- 加入精选 -->
                <el-button
                :title="$t('table.'+'AddSelection')"
              @click="addChoice(row.id)"
                size="small"
                type="warning"
                plain
                icon="el-icon-check"
                circle
                class="handleButtonHover"
              ></el-button>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px; float: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :total="total"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="prev, pager, next, sizes,  jumper"
        >
        </el-pagination>
      </el-card>
      <!-- 预览试题 -->
      <questions-preview :showPreviewDialog.sync="showPreviewDialog" :previewData="previewData"/>
    </div>
  </div>
</template>

<script>
import questionsFilter from '@/module-hmmm/components/questions-filter.vue'
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'
import { list as getListApi, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
import { formatDateTime } from '@/utils/dayjs'
import { handleDownload } from '@/utils/excelExport'
export default {
  components: {
    questionsFilter,
    questionsPreview
  },
  data () {
    return {
      tableData: [], // 基础题库列表
      currentPage4: 100,
      total: 0, // 总条数
      page: 1, // 当前页
      pagesize: 5, // 页容量
      isTableLoading: false, // table-loading
      showPreviewDialog: false,
      previewData: {} // 题目预览
    }
  },

  created () {
    this.getList() // 获取基础题库列表
  },
  methods: {
    tableHeaderBottomColorFn () {
      return {
        'background-color': 'rgb(250, 250, 250)',
        'border-bottom': '2px solid #ccc'
      }
    },
    // 预览试题
    async previewQuestion (id) {
      this.showPreviewDialog = true
      const { data } = await detail({ id })
      console.log(data)
      this.previewData = data
    },
    // 修改试题
    editQuestion (id) {
      this.$router.push(`/questions/new?id=${id}&routerJump=1`)
    },
    // 删除试题
    delQuestion (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        // 不在第一页，并且当前数据剩下一条
        if (this.page > 1 && this.tableData.length === 1) {
          this.page--
        }
        await remove({ id: id })
        this.$message.success('删除成功')
        this.getList()
      }).catch(() => {})
    },
    // 加入精选
    addChoice (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        type: 'info'
      }).then(async () => {
        await choiceAdd({ id: id, choiceState: 1 })
        this.$message.success('加入精选成功')
        this.getList()
      }).catch(() => {})
    },
    // 获取基础题库列表
    async getList (formData = {}) {
      this.isTableLoading = true
      const {
        data: { items, counts }
      } = await getListApi({ page: this.page, pagesize: this.pagesize, ...formData })
      this.tableData = items
      this.total = counts
      this.isTableLoading = false
    },
    // 子组件清除，重置获取第一页数据
    setList () {
      this.page = 1
      this.pagesize = 5
      this.getList()
    },
    // 页容量
    handleSizeChange (val) {
      this.pagesize = val
      this.getList()
    },
    // 当前页
    handleCurrentChange (val) {
      this.page = val
      this.getList()
    },
    // 搜索
    async submitFilter (formData) {
      this.getList(formData)
    },
    // 题型处理
    formatQuestionType (rowVal) {
      const typeObj = questionType.find(item => item.value === rowVal)
      return typeObj?.label ? typeObj?.label : '未知'
    },
    // 难度处理
    formatDifficulty (rowVal) {
      const typeObj = difficulty.find(item => item.value === rowVal)
      return typeObj?.label ? typeObj?.label : '未知'
    },
    // 时间处理
    formatDddDate (rowVal) {
      return formatDateTime(rowVal)
    },
    // excel导出
    async handleExcelExport () {
      const {
        data: { items }
      } = await getListApi({ page: 1, pagesize: 9999 })
      const tableTypeList = {
        number: '试题编号',
        subject: '学科',
        catalog: '目录',
        questionType: '题型',
        question: '题干',
        addDate: '录入时间',
        difficulty: '难度',
        creatorcreator: '录入人'
      }
      const zh = []
      const type = {}
      for (const k in tableTypeList) {
        zh.push(tableTypeList[k])
        const typeKey = tableTypeList[k]
        type[typeKey] = k
      }
      handleDownload(items, zh, type)
    }

  }
}
</script>

<style scoped lang="scss">
.is-never-shadow {
  padding: 5px 0px 20px 0px;
}
</style>
